<script setup lang="ts">
import { ref,} from 'vue'
// ts + ref

// 1.自动推导,有智能提示功能
// 作用：限制show.value必须是一个布尔类型
const show = ref(false)
show.value = false
show.value = true
// show.value = 10//不能将类型“number”分配给类型“boolean”
const person = ref({
  name:'小明',
  age:20
})
person.value.name = 'joker'
person.value.age = 22



// 2.泛型显示指定类型
//ref<type>()
//作用: 1.限制初始值的类型  2.限制后续赋值操作的新值的类型   3.智能提示
type Person = {
  name:String,
  age:Number,
  gender?:String
}

const p1 = ref<Person>({
  name:'joker',
  age:20
})

p1.value = {
  name:'jack',
  age:18
}

//总结：
// 1. 绝大数情况下直接使用类型推断，更加方便，不用添加类型类型代码，享受类型的好处
// 2. 类型不太确定 使用泛型参数坐精准的类型控制
</script>

<template>{{ p1.age }}</template>

